<template>
	<view class="box" id="www" :style="'height:' + height">
		<scroll-view scroll-y="true" class="left_menu">
			<view class="line" :style="'top:' + leftList[scrollIndex] + 'px'"></view>
			<view class="left_item" :style="currentIndex == index ? 'color:#767C58;background:#fff' : 'color:#27262D'" v-for="(item, index) in list" @click="changeContent(index)">
				<view id="left">{{ item.title }}</view>
			</view>
		</scroll-view>
		<scroll-view @scrolltolower="scrolltolower" scroll-y="true" class="right_content" scroll-with-animation :scroll-into-view="currentContent" @scroll="scroll">
			<view v-for="(item, index) in list" :id="'c-' + index">
				<view class="content_title" id="title">{{ item.title }}</view>
				<view  class="box_right_item flex_r_between">
					<view class="" v-for="cur in item.children">
						<view class="img">
							
						</view>
						<view class="name flex_center">
							{{ cur }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'menu-navigation',
	props: {
		list: {
			type: Array,
			default: () => [
				{
					title: '电器',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				},
				{
					title: '电器1',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				},
				{
					title: '电器2',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				},
				{
					title: '电器3',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				},
				{
					title: '电器4',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				},
				{
					title: '电器5',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				},
				{
					title: '电器6',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				},
				{
					title: '电器7',
					children: ['1', '2', '1', '2', '1', '2', '1', '2']
				}
			]
		},
		height:{
			type:String,
			default:'500rpx'
		}
	},
	data() {
		return {
			customBox: {},
			currentContent: 'c-0',
			currentIndex: 0,
			topList: [],
			hcIndex: 0,
			hcTop: 0,
			leftList: [0],
			scrollIndex: 0,
			scrollBar: false
		};
	},
	methods: {
		scrolltolower(e) {
			// this.scrollIndex = this.currentIndex
			// console.log(this.scrollIndex)
		},
		changeContent(index) {
			this.currentContent = 'c-' + index;
			this.scrollIndex = index;
			this.currentIndex = index;
			// this.topList.map((item, index) => {
			// 	if (e.detail.scrollTop >= item) {
			// 		this.currentIndex = index;
			// 		this.scrollIndex = index
			// 		this.hcIndex = index;
			// 	}
			// });
		},
		scroll(e) {
			// this.scrollBar = false
			this.topList.map((item, index) => {
				if (e.detail.scrollTop >= item && e.detail.scrollTop >= this.hcTop) {
					// i = index
					this.currentIndex = index;
					this.scrollIndex = index;
					this.hcIndex = index;
					this.hcTop = e.detail.scrollTop;
				} else if (e.detail.scrollTop >= item && e.detail.scrollTop <= this.hcTop) {
					this.currentIndex = index;
					this.scrollIndex = index;
					this.hcIndex = index;
					this.hcTop = e.detail.scrollTop;
				}
			});
		}
	},
	mounted() {
		this.$nextTick(() => {
			console.log(this);
			const query3 = uni.createSelectorQuery().in(this);
			query3
				.selectAll('#www')
				.boundingClientRect(data1 => {
					// this.topList = data.map(item => item.top);
					const query2 = uni.createSelectorQuery().in(this);
					query2
						.selectAll('#left')
						.boundingClientRect(data => {
							this.leftList = data.map(item => item.top - data1[0].top);
							console.log(this.leftList);
						})
						.exec();
						const query = uni.createSelectorQuery().in(this);
						query
							.selectAll('#title')
							.boundingClientRect(data => {
								this.topList = data.map(item => item.top - data1[0].top);
							})
							.exec();
				})
				.exec();
			
		});
	}
};
</script>

<style lang="less">
.box {
	height: 100%;
	width: 100%;
	display: flex;
}
.left_menu {
	flex: 2;
	background: #f8f7fc;
	height: 100%;
	position: relative;
	font-size: 28rpx;
	line-height: 40rpx;
	.left_item {
		height: 80rpx;
		display: flex;
		align-items: center;
		& > view {
			padding-left: 30rpx;
		}
	}
	.line {
		position: absolute;
		left: 0;
		top: 0;
		width: 4rpx;
		height: 40rpx;
		background: #767c58;
		transition: all 0.5s;
	}
}
.right_content {
	flex: 5;
	background: #fff;
	height: 100%;
	.content_title{
	  position: sticky;
		top:0;
		// z-index: 10;
		background-color: #fff;
		height: 60rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #27262D;
		margin: 0 30rpx 20rpx;
	}
	.box_right_item{
	padding:0 30rpx;
		display: flex;
		flex-wrap: wrap;
		&>view{
			width: 48%;
			margin: 0 0 30rpx;
			.img{
				width: 100%;
				height: 230rpx;
				border-radius: 10rpx;
				background: #ccc;
			}
			.name{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #27262D;
				margin: 30rpx 0 0;
				
			}
		}
	}
}
</style>
